#app {
  .app-warpper {
    position: relative;
    width: 100%;
    height: 100%;
    .container-box {
      position: relative;
      width: 100%;
      height: 100%;
      .sider-box {
        padding: 0;
        margin-bottom: 0;
        position: fixed;
        top: 0;
        bottom: 0;
        border-radius: 0;
        transition: width 0.3s;
        .SideBar-scrollbar {
          height: 100%;
          .el-scrollbar__wrap {
            overflow-x: hidden;
            // 标题
            .SideBar-title {
              padding-top: 5px;
              white-space: nowrap;
              transition: padding-left 0.3s;
              cursor: pointer;

              img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                vertical-align: bottom;
              }

              span {
                font-size: 20px;
                margin-left: 10px;
                color: #fff;
                transition: display 0.3s;
              }
            }
            .el-menu {
              border: 0;
            }

            // 二级侧边栏的背景色
            .SidebarItem-box {
              // 用于解决 出现的侧边栏收起 但是侧边栏文字和右箭头不隐藏的bug
              .MenuitemClass {
                .el-submenu__title {
                  span,
                  .el-icon-arrow-right {
                    display: none;
                  }
                }
              }
              .icon-svg {
                margin-right: 10px;
                vertical-align: middle;
                font-size: 18px;
              }

              .is-opened,
              .MenuitemClass {
                &.is-active {
                  > div {
                    color: #409eff !important;
                  }
                }
              }
              .submenu-side {
                // 二级菜单 中的子菜单被选中
                &.is-active {
                  .el-submenu__title {
                    span {
                      color: $subMenuActiveText;
                    }
                  }
                }
                .el-menu-item {
                  background-color: $subMenuBg !important;

                  &:hover {
                    background-color: $subMenuHover !important;
                  }
                }
                .el-icon-arrow-right {
                  display: none;
                }
              }
            }
          }
        }
      }
      .main-box {
        transition: margin-left 0.3s;
        padding: 0;
        overflow-x: hidden;
        > div {
          width: 100%;
        }
        .AppMain-box {
          padding: 20px;
        }
      }
    }
  }
}
// 侧边栏收起的样式
.el-menu--vertical {
  .icon-svg {
    margin-right: 10px;
    vertical-align: middle;
    font-size: 18px;
  }
  .SidebarItem-box {
    .el-submenu {
      &.is-active {
        > div {
          color: #409eff !important;
        }
      }
    }
  }
}
